<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="box-card">
            <div class="teamTopTip">
                <el-icon color="#252B3A" size="16px"><Warning /></el-icon>
                <div class="tipbox">
                    <div class="tiptitle">温馨提示</div>
                    <div class="tipitem">
                        当前管理团队 <span> {{ store.getters.mainTeam.teamName }} </span> 下，您有<span>100</span> 个成员名额，已使用<span>{{ pageData.total }}</span
                        >个，已冻结<span>0</span>个。
                        <el-button type="primary" size="small" link>申请加入</el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <div class="teamBox">
            <div class="teamtop">
                <div class="left">
                    <el-input class="searchInput" v-model="queryData.param" placeholder="搜索成员、部门、岗位" @input="getTeamMenberList(selectCompany)" suffix-icon="Search" />
                    <!-- <el-button type="primary" @click="getTeamMenberList(selectCompany)" text bg>搜索</el-button> -->
                    <sxnfbtn @click="getTeamMenberList(selectCompany)" color="#23b14d">搜索</sxnfbtn>
                </div>
                <div class="right">
                    <sxnfbtn @click="topages('/team/teammanagement/audit')" color="#23b14d">审核申请</sxnfbtn>
                    <sxnfbtn @click="topages('/team/teammanagement/invite')" color="#23b14d">邀请成员</sxnfbtn>
                    <!-- <el-button type="primary" @click="topages('/team/teammanagement/audit')" text bg>审核申请</el-button> -->
                    <!-- <el-button type="primary" @click="topages('/team/teammanagement/invite')" text bg>邀请成员</el-button> -->
                </div>
            </div>
            <div class="table">
                <el-table :data="pageData.list" style="width: 100%" border class="configurationtable">
                    <el-table-column label="序号" width="50">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="成员名称" width="160"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                    <el-table-column prop="phoneNum" label="联系电话" width="160"></el-table-column>
                    <el-table-column prop="" label="个人常驻地址">
                        <template #default="scpoe">
                            <span v-if="scpoe.row.userAddressArea">{{ JSON.parse(scpoe.row.userAddressArea).valueText }}/{{ scpoe.row.userAddress }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="departmentName" label="所属部门" width="180"></el-table-column>
                    <el-table-column prop="positionName" label="岗位" width="180"></el-table-column>
                    <el-table-column prop="" label="加入方式" width="180">
                        <template #default="scpoe"> {{ scpoe.row.invitationWay == "0" ? "被动加入" : "主动加入" }} </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                        <template #default="scpoe">
                            <el-button type="primary" size="small" link @click="topages(`/team/teammanagement/menbermsg/${scpoe.row.userId}?teamId=${selectCompany}&type=1`)">详细</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getTeamMenber } from "@/api/team";
const router = useRouter();
const store = useStore();
const pageData: any = reactive({
    list: [],
    total: 0,
});
// const tableData = ref([{}, {}]);
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    param: "",
});

// 获取团队成员
const getTeamMenberList = (id: number | string) => {
    // type = 0 时为条件查询
    getTeamMenber(id, queryData).then((res: any) => {
        // console.log(res.data.list);
        nextTick(() => {
            pageData.list = res.data.list;
            pageData.total = res.data.total;
        });
    });
};
getTeamMenberList(store.getters.mainTeamId);
// 监听头部公司选择框数据变化
const selectCompany = computed({
    get: () => {
        return store.getters.mainTeamId;
    },
    set: (val) => {
        console.log(val);
    },
});
watch(
    selectCompany,
    (newVal, oldVal) => {
        if (oldVal) {
            // queryData.teamId = newVal;
            getTeamMenberList(newVal);
        }
    },
    { immediate: true, deep: true }
);
// 分页
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getTeamMenberList(store.getters.mainTeamId);
};
const topages = (url: string) => {
    router.push(url);
};
</script>
<style lang="scss" scoped>
.teamTopTip {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .tipbox {
        margin-left: 10px;
        .tiptitle {
            font-size: 14px;
            color: #252b3a;
        }
        .tipitem {
            margin-top: 10px;
            font-size: 14px;
            color: #252b3a;
            display: flex;
            align-items: center;
            span {
                color: #299c37;
            }
        }
    }
}
.teamBox {
    margin-top: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: var(--el-box-shadow-light);
    .teamtop {
        border-bottom: 1px solid #eeeeee;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .searchInput {
                width: 300px;
                margin-right: 10px;
            }
        }
    }
    .table {
        padding: 20px;
    }
}
</style>
